<template>
	<view class="classlist">
		
		
		<!-- 这边写加载动画的盒子 ，加载动画用的官方的，也可以去插件市场搜骨架屏-->
		<view class="loadingLayout" v-if="!classList.length && !noData">
			<!-- 官方组件 -->
			<uni-load-more status="loading"></uni-load-more>
	
		</view>
		
		
					<view class="content">
					<navigator :url="'/pages/preview/preview?id='+item._id" class="item" 
					v-for="item in classList"
					:key="item._id"
					>			
						<image :src="item.smallPicurl" mode="aspectFill"></image>
					</navigator>
				</view>
		
		
		<!-- 这边写触底加载动画的盒子 ，加载动画用的官方的，也可以去插件市场搜骨架屏-->
		<view class="loadingLayout" v-if="classList.length || noData">
			<!-- 官方组件  noMore没有更多数据，用三元表达式-->
			<uni-load-more :status="noData? 'noMore':'loading'"></uni-load-more>
			
		</view>
		<!-- 底部安全高度 -->
		<view class="safe-area-inset-bottom">
			
		</view>
		
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import {apiGetClassList,apiGetHistoryList} from "@/api/apis.js"
	import{gotoHome} from "@/utils/common.js"
	/* 生命周期  可以传递页面参数   还有触底获取数据的方法*/
	import {onLoad,onUnload,onReachBottom,onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"
	const classList = ref([]);
	
	//这个的用来判断还有没有数据的，没有数据就不再请求
	const noData = ref(false)
	
	//定义data传参数据,里面是默认的传参值.
	const queryParams = {
		pageNum:1,
		pageSize:12
	}
	
	/* 生命周期 */
	/* onLoad执行顺序要晚于setUp语法糖,所以如果有调用的话要放到onLoad里面去调用执行 */
	let pageNamer;
	onLoad( (e)=>{
		

		/* 如果没有传东西id直接给个空值,有传就按传的东西 */
		 let { id = null, name = null, type = null } = e;
		 if(type) queryParams.type = type;
		 if(id) queryParams.classid = id;
		 
		 pageNamer=name;
		 /* 这边去动态修改分类标题 */
		 uni.setNavigationBarTitle({
		 	title:name
		 })
		 getClassList();
	})
 /* 触底方法 和onLoad是同级的*/
 onReachBottom( ()=>{
	 if(noData.value) return;
	 /* 触底直接再次调用数据 不能用=+1不然刷新不了*/
	 queryParams.pageNum++
	 getClassList()
	
	 
 })
  
  //获取分类列表里面的分类内容数据图片
  const getClassList = async ()=>{
	  let res;
	  if(queryParams.classid) res =await apiGetClassList(queryParams);
  	if(queryParams.type) res =await apiGetHistoryList(queryParams);
				
  	//if(queryParams.classid) res = await apiGetClassList(queryParams);
  	//if(queryParams.type) res = await apiGetHistoryList(queryParams);
  	/* 获取的新值和旧值拼接在一起  ...是展开的意思*/
  	classList.value = [...classList.value , ...res.data];
  	if(queryParams.pageSize > res.data.length) noData.value = true; 
	 /* 写入同步缓存 */
  	uni.setStorageSync("storgClassList",classList.value);	
  	console.log(classList.value);	
  }
  
  
  //分享给好友,这个是分享的函数nShareAppMessage 官方的.
  	onShareAppMessage((e) => {
  		return {
  			title: "王同学的壁纸库"+pageNamer,
  			path: "pages/calsslist/calsslist?id="+queryParams.classid+"&name="+pageNamer
  		}
  	})
  	//分享朋友圈 需要权限，要不就是用小程序测试号的appid
  	//测试号id是wx04394c05eeb40715
  	//主号用的是wxd4651c59239cb9b7
  	onShareTimeline(() => {
  		return {
  			title: "王同学的壁纸库,精选分类",
  			imageUrl: "/static/images/logo2.jpg"
  		}
  	})
	//清除缓存提升性能
	onUnload(()=>{
		uni.removeStorageSync("storgClassList")
	});
  
  
</script>

<style lang="scss" scoped>
	.classlist{
		.content{
			display: grid;
			grid-template-columns: repeat(3,1fr);
			gap:5rpx;
			padding:5rpx;
			.item{
				height: 440rpx;
				image{
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>
